<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<title>事件处理</title>
		<!-- <script type="text/javascript" src="js/vue.js"></script> -->
	</head>
	<body>
	</body>
	
	<script type="text/javascript">
			//平常我们给对象新增属性的话，可以直接在对象上通过.来追加属性
			let number = 18;
			let person = {
				name:'pop',
				sex:'man'
				// age:18 可以通过这个方法增加
			}
			
			// person.age = 18;
			//也可以通过这种方法增加
			
			//但其实，还有一种高级的用法
			Object.defineProperty(person,'age',{
				// value:18,
				enumerable:true,//控制属性是否可以枚举，默认是false
				// 还需要注意的是，当你定义了writeable属性的时候，set方法是不能使用的
				// writable:true,//控制属性是否可以被修改，默认是false
				configurable:true,//控制属性是否可以被删除，默认是false
				get(){
					// 当有人读取person的age属性的时候，get函数(getter)就会被调用
					console.log('调用get方法');
					return number;
				},
				set(value){
					// 当有人修改person的age属性的时候，set函数(setter)就会被调用
					console.log('有人调用set方法');
					number = value;
				}
			});
			
			// value和 get 是同一个作用，只能同时用一个。
			// writable和set是同一个作用，用一个。
			 
			// 完整实例：
				// Object.defineProperties(obj, {
				// 	'address': {
				// 	  //value: true,
				// 	 // writable: true,
				// 	  get:()=>{console.log("get110");return obj._address;},
				// 	  set:(v)=>{console.log("get110");return obj._address=v;}
				// 	}
				// 	// etc. etc.
				//   });
			
			/*想额外说一下enumerable这个属性的影响
			
			在控制台上，如果直接在对象上添加，会显示亮色
			但是使用defineProperty会变暗、
			由于这个属性默认是false的
			也就是不可枚举的，则意味着
			你在遍历的对象属性的时候，这个属性会被跳过。
			
			*/
		   console.log(person);
	</script>
</html>
